<template>
    <div :class="'diamond'+itemdata.style">
        <div v-html="itemdata.title" class="diamond-container" ></div>
    </div>
    
</template>

<script setup lang="ts">
const props = defineProps({
  itemdata:{
    type:Object,
    default:{}
  }
})

</script>

<style scoped>
.diamond-container{
  max-height: 400px;
  overflow: scroll;
  
}

.diamond1 {
  background: rgba(84, 112, 198, 0.9);
  /*linear-gradient(to right, #2196f3 0%, #673ab7 100%);*/
  height: 100%;
  font-size: 20px;
  color: white;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}

.diamond2 {
  background: rgba(145, 204, 117, 0.9);
  /*linear-gradient(to right, #FF9800 0%, #FFC107 100%);*/
  height: 100%;
  font-size: 20px;
  color: white;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}

.diamond3 {
  background: rgba(250, 200, 88, 0.9);
  /*linear-gradient(to right, #FFEB3B 0%, #CDDC39 100%);*/
  height: 100%;
  font-size: 20px;
  color: white;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}

.diamond4 {
  background: rgba(238, 102, 102, 0.9);
  /*linear-gradient(to right, #FFEB3B 0%, #CDDC39 100%);*/
  height: 100%;
  font-size: 20px;
  color: white;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}

.diamond5 {
  background: rgba(115, 192, 222, 0.9);
  /*linear-gradient(to right, #FFEB3B 0%, #CDDC39 100%);*/
  height: 100%;
  font-size: 20px;
  color: white;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}

.diamond6 {
  background: rgba(59, 162, 114, 0.9);
  /*linear-gradient(to right, #FFEB3B 0%, #CDDC39 100%);*/
  height: 100%;
  font-size: 20px;
  color: white;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}

.diamond7 {
  background: rgba(252, 132, 82, 0.9);
  /*linear-gradient(to right, #FFEB3B 0%, #CDDC39 100%);*/
  height: 100%;
  font-size: 20px;
  color: white;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}

.diamond8 {
  background: rgba(154, 96, 180, 0.9);
  /*linear-gradient(to right, #FFEB3B 0%, #CDDC39 100%);*/
  height: 100%;
  font-size: 20px;
  color: white;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}

.diamond9 {
  background: rgba(0, 0, 0, 0.9);
  /*linear-gradient(to right, #FFEB3B 0%, #CDDC39 100%);*/
  height: 100%;
  font-size: 20px;
  color: white;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}

.diamond0 {
  background: rgba(255, 255, 255, 0.9);
  /*linear-gradient(to right, #FFEB3B 0%, #CDDC39 100%);*/
  height: 100%;
  font-size: 20px;
  position: relative;
  border-radius: 6px;
  padding: 1vh;
}</style>
